<!-- 系统监控页线框原型（独立文件） -->
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>系统监控 - 线框图原型</title>
  <style>
    body { margin: 0; padding: 0; background: #f6f7fb; font-family: Arial, sans-serif; }
    .sidebar { position: fixed; left: 0; top: 0; width: 220px; height: 100vh; background: #232946; color: #fff; display: flex; flex-direction: column; padding: 24px 0 0 0; box-sizing: border-box; }
    .sidebar .logo { font-size: 1.5rem; font-weight: bold; text-align: center; margin-bottom: 32px; letter-spacing: 2px; }
    .sidebar .menu { flex: 1; display: flex; flex-direction: column; gap: 12px; padding: 0 0 0 24px; }
    .sidebar .menu .menu-item { padding: 10px 0; border-radius: 6px 0 0 6px; cursor: pointer; color: #bfc8e2; font-size: 1rem; }
    .sidebar .menu .menu-item.active { background: #e7eaf6; color: #232946; font-weight: bold; }
    .main { margin-left: 220px; min-height: 100vh; background: #f6f7fb; }
    .header { display: flex; align-items: center; justify-content: space-between; margin: 0 0 24px 0; }
    .title { font-size: 1.6rem; font-weight: bold; color: #232946; margin: 32px 0 0 32px; }
    .refresh-btn { background: #6a9cfb; color: #fff; border: none; border-radius: 8px; padding: 8px 24px; font-size: 1rem; font-weight: bold; cursor: pointer; margin: 32px 32px 0 0; }
    .card-row { display: flex; gap: 24px; margin: 32px 32px 0 32px; }
    .stat-card { flex: 1; background: #fff; border-radius: 18px; box-shadow: 0 2px 8px rgba(80,60,180,0.06); padding: 24px 32px; display: flex; flex-direction: column; align-items: flex-start; }
    .stat-title { font-size: 1.1rem; color: #888; margin-bottom: 8px; }
    .stat-value { font-size: 2rem; font-weight: bold; margin-bottom: 8px; }
    .stat-bar { width: 100%; height: 8px; border-radius: 4px; background: #e0e0e0; margin-top: 8px; }
    .stat-bar-inner { height: 100%; border-radius: 4px; }
    .stat-bar.cpu { background: linear-gradient(90deg,#6a9cfb 0%,#a0e9ff 100%); }
    .stat-bar.mem { background: linear-gradient(90deg,#ffb347 0%,#ffcc80 100%); }
    .stat-bar.disk { background: linear-gradient(90deg,#ffb347 0%,#ffcc80 100%); }
    .stat-bar.conn { background: linear-gradient(90deg,#6a9cfb 0%,#a0e9ff 100%); }
    .charts-row { display: flex; gap: 24px; margin: 32px 32px 0 32px; }
    .chart-card { flex: 1; background: #fff; border-radius: 18px; box-shadow: 0 2px 8px rgba(80,60,180,0.06); padding: 24px 32px; }
    .chart-title { font-size: 1.1rem; color: #888; margin-bottom: 8px; display: flex; align-items: center; justify-content: space-between; }
    .chart-placeholder { width: 100%; height: 180px; background: #f6f7fb; border-radius: 8px; border: 1px dashed #e0e0e0; display: flex; align-items: center; justify-content: center; color: #bbb; font-size: 1.1rem; }
    .service-row { margin: 32px 32px 0 32px; background: #fff; border-radius: 18px; box-shadow: 0 2px 8px rgba(80,60,180,0.06); padding: 24px 32px; }
    .service-header { display: flex; align-items: center; gap: 16px; margin-bottom: 18px; }
    .service-header input, .service-header select { padding: 6px 12px; border: 1px solid #e0e0e0; border-radius: 6px; font-size: 1rem; background: #f6f7fb; }
    .service-refresh-btn { background: #6a9cfb; color: #fff; border: none; border-radius: 8px; padding: 8px 18px; font-size: 1rem; font-weight: bold; cursor: pointer; margin-left: auto; }
  </style>
</head>
<body>
  <div class="sidebar">
    <div class="logo">SG3L</div>
    <div class="menu">
      <div class="menu-item">分析页</div>
      <div class="menu-item">仪表盘</div>
      <div class="menu-item active">监控页</div>
      <div class="menu-item">模板中心</div>
      <div class="menu-item">组件中心</div>
      <div class="menu-item">日志中心</div>
      <div class="menu-item">权限管理</div>
      <div class="menu-item">用户管理</div>
      <div class="menu-item">角色管理</div>
      <div class="menu-item">系统设置</div>
    </div>
  </div>
  <div class="main">
    <div class="header">
      <div class="title">系统监控</div>
      <button class="refresh-btn">刷新数据</button>
    </div>
    <div style="color:#888;font-size:0.98rem;margin:0 32px 0 32px;">实时监控系统运行状态 - 最近更新: 17:09:49</div>
    <div class="card-row">
      <div class="stat-card">
        <div class="stat-title">CPU 使用率</div>
        <div class="stat-value" style="color:#409eff;">8.6%</div>
        <div class="stat-bar cpu"><div class="stat-bar-inner" style="width:8.6%;background:#6a9cfb;"></div></div>
        <div style="color:#409eff;font-size:0.95rem;margin-top:8px;">运行良好</div>
      </div>
      <div class="stat-card">
        <div class="stat-title">内存使用</div>
        <div class="stat-value" style="color:#ff9800;">68%</div>
        <div class="stat-bar mem"><div class="stat-bar-inner" style="width:68%;background:#ffb347;"></div></div>
        <div style="color:#ff9800;font-size:0.95rem;margin-top:8px;">运行良好</div>
      </div>
      <div class="stat-card">
        <div class="stat-title">磁盘空间</div>
        <div class="stat-value" style="color:#ff9800;">79%</div>
        <div class="stat-bar disk"><div class="stat-bar-inner" style="width:79%;background:#ffb347;"></div></div>
        <div style="color:#ff9800;font-size:0.95rem;margin-top:8px;">空间充足</div>
      </div>
      <div class="stat-card">
        <div class="stat-title">活跃连接</div>
        <div class="stat-value" style="color:#409eff;">56个</div>
        <div class="stat-bar conn"><div class="stat-bar-inner" style="width:56%;background:#6a9cfb;"></div></div>
        <div style="color:#409eff;font-size:0.95rem;margin-top:8px;">活跃连接数: 56</div>
      </div>
    </div>
    <div class="charts-row">
      <div class="chart-card">
        <div class="chart-title">CPU 使用率 <span style="color:#67c23a;font-size:0.98rem;">8.6%</span></div>
        <div class="chart-placeholder">折线图占位</div>
      </div>
      <div class="chart-card">
        <div class="chart-title">内存使用情况 <span style="color:#ff9800;font-size:0.98rem;">68.1%</span></div>
        <div class="chart-placeholder">面积图占位</div>
      </div>
    </div>
    <div class="service-row">
      <div class="service-header">
        <input type="text" placeholder="搜索服务..." style="width:200px;" />
        <select><option>状态筛选</option></select>
        <button class="service-refresh-btn">刷新服务</button>
      </div>
      <div style="height:48px;background:#f6f7fb;border-radius:8px;border:1px dashed #e0e0e0;display:flex;align-items:center;justify-content:center;color:#bbb;font-size:1.1rem;">服务状态监控表格占位</div>
    </div>
  </div>
</body>
</html>
